<template>
  <div>
    <el-table v-if="!showPropertyParam" size="mini" :data="modelParams" highlight-current-row border style="width: 100%;">
      <el-table-column prop="name" label="参数名称" width="100">
      </el-table-column>
      <el-table-column prop="identifier" label="标识符" width="180">
      </el-table-column>
      <el-table-column prop="dataType.type" label="类型" width="80">
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header">
          <el-button @click="addParams" type="primary" size="mini" plain>添加参数</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleParamEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm title="确认要删除该功能吗？" @confirm="deleteParam(scope.$index, scope.row)">
            <el-button slot="reference" size="mini" plain type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-tabs v-if="showPropertyParam" type="border-card">
      <el-tab-pane label="参数设置">
        <PropertyModel :property="currParamProperty" :enumItems="enumItems" :boolItem="boolItem" :isProperty="false"></PropertyModel>
        <el-row>
          <el-col :span="16">&nbsp;</el-col>
          <el-col :span="8">
            <el-button size="mini" @click="cancelEditParam()">取消</el-button>
            <el-button size="mini" @click="saveParam()" type="primary">保存</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {
    ParseProperty
  } from '../../api/productApi'
  import PropertyModel from './PropertyModel.vue'
  export default {
    name: 'ModelParams',
    props: {
      modelParams: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    data() {
      return {
        showPropertyParam: false,
        isAdd: true,
        currParamProperty: {
          name: "",
          identifier: "",
          type: "property",
          dataType: {}
        },
        enumItems: [{}],
        boolItem: {
          _true: "",
          _false: ""
        }

      }
    },
    // 注册组件
    components: {
      PropertyModel
    },
    created() {},
    methods: {
      handleParamEdit(index, row) {
        this.isAdd = false
        this.showPropertyParam = true
        this.currParamProperty = row

        let specs = row.dataType.specs;
        if (row.dataType.type == "enum" && specs) {
          let enumSpecs = []
          for (var p in specs) {
            enumSpecs.push({
              name: specs[p],
              value: p
            })
            this.enumItems = enumSpecs
          }
        }
        if (row.dataType.type == "bool" && specs) {
          this.boolItem = {
            _true: specs['0'],
            _false: specs['1']
          }
        }

      },
      addParams() {
        this.isAdd = true
        this.showPropertyParam = true
        this.currParamProperty = {
          name: "",
          identifier: "",
          type: "property",
          dataType: {
            specs: {}
          }
        }

        this.enumItems = [{}]
        this.boolItem = {
          _true: "",
          _false: ""
        }
      },
      deleteParam(index) {
        this.modelParams.splice(index, 1)
      },
      cancelEditParam() {
        this.showPropertyParam = false
      },
      newProperty() {
        return ParseProperty(this.currParamProperty, this.enumItems, this.boolItem)
      },
      saveParam() {
        if (this.isAdd) {
          this.modelParams.push(this.newProperty());
        } else {
          let prop = this.newProperty()
          for (var i = 0; i < this.modelParams.length; i++) {
            if (this.modelParams[i].identifier == prop.identifier) {
              this.modelParams[i] = prop
            }
          }
        }

        this.showPropertyParam = false
      }
    }
  }
</script>

<style>
</style>
